<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="/assets/coze.png">
    <title>Authorization Successful - Coze OAuth</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f0f4ff 0%, #f8f9ff 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            background: white;
        }
        .card-body {
            padding: 3rem 2rem;
        }
        .logo-section {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin: 0 auto 1.5rem;
        }
        .logo {
            width: 64px;
            height: 64px;
        }
        .user-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
        }
        .user-info-tooltip {
            position: absolute;
            background: white;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            min-width: 200px;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 0.5rem;
            display: none;
            z-index: 1000;
        }
        .user-info-tooltip.show {
            display: block;
        }
        .user-info-item {
            margin: 0.25rem 0;
            font-size: 0.875rem;
            color: #333;
        }
        .user-info-label {
            color: #666;
            margin-right: 0.5rem;
        }
        .token-section {
            background-color: #f8f9ff;
            border-radius: 12px;
            border: 1px solid #e8eeff;
            margin: 1.5rem 0;
        }
        .token-header {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #e8eeff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .token-header h3 {
            font-size: 0.875rem;
            font-weight: 600;
            color: #333;
            margin: 0;
        }
        .token-header .copy-btn {
            background: none;
            border: none;
            color: #6366f1;
            font-size: 0.875rem;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            transition: all 0.2s ease;
        }
        .token-header .copy-btn:hover {
            background-color: #e8eeff;
        }
        .token-content {
            padding: 1.5rem;
            font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
            font-size: 0.875rem;
            line-height: 1.6;
            color: #444;
            word-break: break-all;
            margin: 0;
        }
        .token-row {
            display: flex;
            margin-bottom: 1rem;
        }
        .token-row:last-child {
            margin-bottom: 0;
        }
        .token-label {
            flex: 0 0 120px;
            color: #666;
            font-weight: 500;
        }
        .token-value {
            flex: 1;
            color: #111;
            position: relative;
        }
        .masked-text {
            font-family: monospace;
            letter-spacing: 2px;
            display: block;
            padding-right: 140px; /* 为两个按钮留出空间 */
            word-break: break-all;
        }
        .token-actions {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 4px;
        }
        .toggle-visibility, .token-copy-btn {
            background: none;
            border: none;
            color: #6366f1;
            font-size: 0.875rem;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            cursor: pointer;
        }
        .toggle-visibility:hover, .token-copy-btn:hover {
            background-color: #e8eeff;
        }
        .status-bar {
            width: 80px;
            height: 4px;
            background-color: #10b981;
            border-radius: 2px;
            margin: 0 auto 1.5rem;
        }
        .title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #10b981;
            margin-bottom: 1.5rem;
        }
        .btn-home {
            background-color: #6366f1;
            border: none;
            border-radius: 6px;
            padding: 12px 32px;
            font-size: 1rem;
            color: white;
            transition: all 0.2s ease;
            margin-top: 1.5rem;
        }
        .btn-home:hover {
            background-color: #5558e6;
            transform: translateY(-1px);
            color: white;
            text-decoration: none;
        }
        .info-text {
            color: #666;
            font-size: 0.95rem;
            margin: 1rem 0;
        }
        .copy-success {
            position: fixed;
            top: 1rem;
            left: 50%;
            transform: translateX(-50%);
            background-color: #10b981;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-size: 0.875rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .copy-success.show {
            opacity: 1;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="copy-success" id="copySuccess">Copied to clipboard!</div>
    <div class="container">
        <div class="card">
            <div class="card-body">
                <div class="text-center">
                    <div class="logo-section" id="logoSection">
                        <a href="{{coze_www_base}}" target="_blank">
                            <img src="/assets/coze.png" alt="Coze Logo" class="logo">
                        </a>
                    </div>
                    <div class="status-bar"></div>
                    <h2 class="title">Authorization Successful</h2>
                    <p class="info-text">You have successfully authorized the application. Here's your authorization information:</p>
                </div>
                <div class="token-section">
                    <div class="token-header">
                        <h3>Access Token</h3>
                        <div>
                            <button class="copy-btn me-2" onclick="refreshToken()" id="refreshBtn">Refresh Token</button>
                        </div>
                    </div>
                    <div class="token-content">
                        <div class="token-row">
                            <span class="token-label">Token Type:</span>
                            <span class="token-value">{{token_type}}</span>
                        </div>
                        <div class="token-row">
                            <span class="token-label">Access Token:</span>
                            <span class="token-value">
                                <span id="access_token" data-value="{{access_token}}">
                                    <span class="masked-text">********************************</span>
                                </span>
                                <div class="token-actions">
                                    <button class="toggle-visibility" onclick="toggleVisibility('access_token')">Show</button>
                                    <button class="token-copy-btn" onclick="copyToken('access_token')">Copy</button>
                                </div>
                            </span>
                        </div>
                        <div class="token-row refresh-token-row">
                            <span class="token-label">Refresh Token:</span>
                            <span class="token-value">
                                <span id="refresh_token" data-value="{{refresh_token}}">
                                    <span class="masked-text">********************************</span>
                                </span>
                                <div class="token-actions">
                                    <button class="toggle-visibility" onclick="toggleVisibility('refresh_token')">Show</button>
                                    <button class="token-copy-btn" onclick="copyToken('refresh_token')">Copy</button>
                                </div>
                            </span>
                        </div>
                        <div class="token-row">
                            <span class="token-label">Expire at:</span>
                            <span class="token-value">{{expires_in}}</span>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <a href="/" class="btn btn-home">Back to Home</a>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 初始化页面时设置按钮文本和行为
        document.addEventListener('DOMContentLoaded', function() {
            const refreshTokenEle = document.getElementById('refresh_token');
            const isJWT = !refreshTokenEle || !refreshTokenEle.textContent.trim();
            if (isJWT) {
                document.getElementById('refreshBtn').textContent = 'New Token';
                // 隐藏 refresh token 行
                document.querySelector('.refresh-token-row').style.display = 'none';
            }
            fetchUserInfo();
        });

        function showMessage(message, isSuccess = true) {
            const successElement = document.getElementById('copySuccess');
            successElement.textContent = message;
            successElement.style.backgroundColor = isSuccess ? '#10b981' : '#ef4444';
            successElement.classList.add('show');
            setTimeout(() => {
                successElement.classList.remove('show');
            }, 2000);
        }

        async function refreshToken() {
            const refreshTokenEle = document.getElementById('refresh_token');
            const isJWT = !refreshTokenEle || !refreshTokenEle.textContent.trim();
            
            try {
                let response;
                if (isJWT) {
                    // JWT OAuth: 直接获取新 token
                    response = await fetch('/callback', {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                } else {
                    // 普通 OAuth: 使用 refresh token 刷新
                    const refreshToken = document.getElementById('refresh_token').getAttribute('data-value').trim();
                    response = await fetch('/refresh_token', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ refresh_token: refreshToken })
                    });
                }
                
                if (!response.ok) {
                    throw new Error(isJWT ? 'Failed to get new token' : 'Failed to refresh token');
                }

                const data = await response.json();
                
                // 更新页面上的 token
                const accessTokenEle = document.getElementById('access_token');
                accessTokenEle.setAttribute('data-value', data.access_token);
                accessTokenEle.querySelector('.masked-text').textContent = '********************************';
                
                if (data.refresh_token) {
                    const refreshTokenEle = document.getElementById('refresh_token');
                    refreshTokenEle.setAttribute('data-value', data.refresh_token);
                    refreshTokenEle.querySelector('.masked-text').textContent = '********************************';
                }
                
                showMessage(isJWT ? 'New token generated successfully!' : 'Token refreshed successfully!');
            } catch (error) {
                console.error('Error:', error);
                showMessage(error.message, false);
            }
        }

        function copyToken(elementId) {
            const tokenElement = document.getElementById(elementId);
            const tokenText = tokenElement.getAttribute('data-value');
            
            navigator.clipboard.writeText(tokenText).then(() => {
                showMessage('Token copied to clipboard!');
            }).catch(err => {
                console.error('Failed to copy text: ', err);
                showMessage('Failed to copy token', false);
            });
        }

        // 获取用户信息并展示
        async function fetchUserInfo() {
            const accessToken = document.getElementById('access_token').getAttribute('data-value');
            const refreshTokenEle = document.getElementById('refresh_token');
            const isJWT = !refreshTokenEle || !refreshTokenEle.textContent.trim();
            
            if (isJWT) {
                return; // JWT 模式不请求用户信息
            }

            try {
                const response = await fetch(`/users_me?access_token=${accessToken}`);

                if (!response.ok) {
                    throw new Error('Failed to fetch user info');
                }

                const userData = await response.json();
                
                if (!userData.user_id) {
                    return; // 如果没有用户ID，不展示用户信息
                }

                // 创建用户头像和信息元素
                const userAvatarContainer = document.createElement('div');
                userAvatarContainer.style.position = 'relative';
                
                const userAvatar = document.createElement('img');
                userAvatar.src = userData.avatar_url;
                userAvatar.alt = 'User Avatar';
                userAvatar.className = 'user-avatar';

                const userInfoTooltip = document.createElement('div');
                userInfoTooltip.className = 'user-info-tooltip';
                userInfoTooltip.innerHTML = `
                    <div class="user-info-item"><span class="user-info-label">User ID:</span>${userData.user_id}</div>
                    <div class="user-info-item"><span class="user-info-label">Username:</span>${userData.user_name}</div>
                    <div class="user-info-item"><span class="user-info-label">Nickname:</span>${userData.nick_name}</div>
                `;

                userAvatarContainer.appendChild(userAvatar);
                userAvatarContainer.appendChild(userInfoTooltip);

                // 添加鼠标事件
                userAvatar.addEventListener('mouseenter', () => {
                    userInfoTooltip.classList.add('show');
                });
                userAvatar.addEventListener('mouseleave', () => {
                    userInfoTooltip.classList.remove('show');
                });

                // 将用户头像添加到logo区域
                const logoSection = document.getElementById('logoSection');
                logoSection.appendChild(userAvatarContainer);
            } catch (error) {
                console.error('Error fetching user info:', error);
            }
        }

        // 添加 token 显示/隐藏功能
        function toggleVisibility(elementId) {
            const element = document.getElementById(elementId);
            const realValue = element.getAttribute('data-value');
            const button = element.parentElement.querySelector('.toggle-visibility');
            const isVisible = element.querySelector('.masked-text').textContent !== '********************************';
            
            if (isVisible) {
                element.querySelector('.masked-text').textContent = '********************************';
                button.textContent = 'Show';
            } else {
                element.querySelector('.masked-text').textContent = realValue;
                button.textContent = 'Hide';
            }
        }
    </script>
</body>
</html> 